<template>
	<view class="wrap">
		<view class="top">
			<g-header @rightclick="onSkipTap('addSalesOrder')">
				<template v-slot:title>
					<view class="header-search">
						<icon type="search" size="16"></icon>
						<input v-model="seachText" type="text" placeholder="输入客户、单号搜索"
							placeholder-style="color: #b3b3b3" @confirm="updatePage">
					</view>
				</template>
			</g-header>
			<!-- <view class="header">
                <view class="header-back" @click="onBackTap">
                    <image src="../../static/images/icon-back.png"></image>
                </view>
                <view class="header-search">
                    <icon type="search" size="16"></icon>
                    <input type="text" placeholder="输入客户、单号搜索" placeholder-style="color: #b3b3b3">
                </view>
                <view class="header-add">
                    <image src="../../static/images/icon-sales-add.png"></image>
                </view>
            </view> -->
			<view class="nav">
				<view class="nav-item" @click="showTimePick = true">
					<text :class="{active: showTimePick}">{{dateObj.dateTypeName}}</text>
				</view>
				<view class="nav-item" @click="showTypePick = true">
					<text :class="{active: showTypePick}">线下销售单</text>
				</view>
			</view>
		</view>
		<view class="list" v-if="list.length > 0">
			<view class="item" v-for="(item, index) in list" :key="index"
				@click="onSkipTap('salesOrderDetail', item.id)">
				<view class="item-T">
					<view class="item-user app_ellipsis2">
						<text>{{item.customerText}}</text>
						<!-- <text>15817909823</text> -->
					</view>
					<view class="">
						<view class="item-price">
							<text>订单总额: </text>
							<text>￥</text>
							<text>{{item.contractPrices}}</text>
						</view>
						<!-- <view class="item-price">
							<text>累计未收款: </text>
							<text>￥</text>
							<text>{{item.wsk}}</text>
						</view> -->
					</view>
				</view>
				<view class="item-B">
					<view class="item-BL">
						<view v-if="item.intoType == 1" class="item-tag" style="margin-right: 10rpx;">线下</view>
						<view v-if="item.intoType == 0" class="item-tag online" style="margin-right: 10rpx;">线上</view>
						<view class="item-no">
							{{item.saleslipCode}}
							<text v-if="item.typeCode == 2">(已打印)</text>
							<text v-if="item.typeCode == 0 || item.typeCode == 1">(未打印)</text>
						</view>
					</view>
					<view class="item-date">{{item.createDate}}</view>
				</view>
			</view>
		</view>
		<no-data v-if="list.length == 0 && hasLoad"></no-data>
		<no-more v-if="page > totalPage && list.length > 0"></no-more>

		<u-popup v-model="showTypePick" mode="top" z-index="999">
			<view class="typePick">
				<view class="typePick-item active">全部</view>
				<view class="typePick-item">线上销售单</view>
			</view>
		</u-popup>
		<!-- <u-popup v-model="showTimePick" mode="bottom" z-index="999">
            <view class="timePick-header">
                <view class="timePick-header_cancel">取消</view>
                <view class="timePick-header_title">选择时间</view>
                <view class="timePick-header_confirm">确认</view>
            </view>
            <view class="timePick-type">
                <view class="timePick-typeItem active">自定义</view>
                <view class="timePick-typeItem">近7天</view>
                <view class="timePick-typeItem">近两周</view>
                <view class="timePick-typeItem">近三周</view>
                <view class="timePick-typeItem">本月</view>
                <view class="timePick-type_border"></view>
            </view>
            <view class="timePick-startend">
                <view class="timePick-start">
                    <view>开始时间</view>
                    <view>2020-03-20</view>
                </view>
                <view class="timePick-end active">
                    <view>结束时间</view>
                    <view>2020-03-20</view>
                </view>
            </view>
            <picker-view v-if="visible" :indicator-style="indicatorStyle" :value="value" @change="bindChange"
                class="timePick-picker">
                <picker-view-column>
                    <view class="timePick-pickerItem" v-for="(item,index) in years" :key="index">{{item}}年</view>
                </picker-view-column>
                <picker-view-column>
                    <view class="timePick-pickerItem" v-for="(item,index) in months" :key="index">{{item}}月</view>
                </picker-view-column>
                <picker-view-column>
                    <view class="timePick-pickerItem" v-for="(item,index) in days" :key="index">{{item}}日</view>
                </picker-view-column>
            </picker-view>
        </u-popup> -->
		<g-time-picker :show="showTimePick" @change="onTimePickerFlagChange" @dateChange="onPickerDateChange">
		</g-time-picker>
	</view>
</template>

<script>
	export default {
		data() {
			const date = new Date()
			const years = []
			const year = date.getFullYear()
			const months = []
			const month = date.getMonth() + 1
			const days = []
			const day = date.getDate()
			for (let i = 1990; i <= date.getFullYear(); i++) {
				years.push(i)
			}
			for (let i = 1; i <= 12; i++) {
				months.push(i)
			}
			for (let i = 1; i <= 31; i++) {
				days.push(i)
			}
			const initBeginDate = new Date(year, month - 1, day - 7 + 1).Format('yyyy-MM-dd')
			return {
				list: [1, 2, 3],
				totalPage: 1,
				page: 1,
				size: 15,
				hasLoad: false,
				noMore: false,
				navIndex: 1,
				showTypePick: false,
				showTimePick: false,
				years,
				year,
				months,
				month,
				days,
				day,
				value: [9999, month - 1, day - 1],
				visible: true,
				indicatorStyle: `height: 50px;`,
				dateObj: {
					beginDate: initBeginDate,
					endDate: date.Format('yyyy-MM-dd'),
					dateType: 1, // 1:近七天，2:近两周，3:近三周，4:近一月，5:自定义
					dateTypeName: '近七天'
				},
				seachText: ''
			}
		},
		onLoad(options) {
			this.updatePage()
		},
		onUnload() {
			uni.$off('update-salesList', this.updatePage)
		},
		onPullDownRefresh() {
			this.updatePage()
		},
		onReachBottom() {
			this.page++
			this.getList()
		},
		methods: {
			updatePage() {
				this.resetPage()
				this.getList()
			},
			resetPage() {
				this.list = []
				this.totalPage = 1
				this.page = 1
				this.size = 15
				this.hasLoad = false
				this.noMore = false
			},
			onSkipTap(type, params) {
				const urlObj = {
					salesOrderDetail: () => {
						uni.$off('update-salesList', this.updatePage)
						uni.$on('update-salesList', this.updatePage)
						uni.navigateTo({
							url: `/pages/salesManagerment/salesOrderDetail?id=${params}`
						})
					},
					addSalesOrder: () => {
						uni.$off('update-salesList', this.updatePage)
						uni.$on('update-salesList', this.updatePage)
						uni.navigateTo({
							url: '/pages/salesManagerment/addSalesOrder',
						})
					},
				}
				this.$g_util.navigationTo(urlObj, type)
			},
			async checkParams() {
				const {
					dateType,
					beginDate,
					endDate
				} = this.dateObj
				if (dateType == 5 && !beginDate) {
					return Promise.reject('请选择开始时间')
				}
				if (dateType == 5 && !endDate) {
					return Promise.reject('请选择结束时间')
				}
				let params = {
					dateType,
					pageNum: this.page,
					pageSize: this.size,
					// seachText: this.seachText, // 关键字（ 客户姓名或单号）
				}
				if (dateType) { // 1: 近七天， 2: 近两周， 3: 近三周， 4: 近一月， 5: 自定义
					params.beginTime = beginDate // 自定义开始时间（ dateType为5时填写， 否则为空）
					params.endTime = endDate // 自定义结束时间（ dateType为5时填写， 否则为空）
				}
				if (this.seachText) {
					params.seachText = this.seachText
				}
				return Promise.resolve(params)
			},
			async getList() {
				if (this.page > this.totalPage) return
				try {
					await this.$g_api.saleslipSeachSaleslips(await this.checkParams()).then(({
						rows,
						totalPage
					}) => {
						uni.stopPullDownRefresh()
						this.hasLoad = true
						this.totalPage = totalPage
						if (rows.length > 0) {
							this.list = this.list.concat(rows)
						} else {
							this.noMore = true
						}
					})
				} catch (e) {
					//TODO handle the exception
					console.log(e);
				}
			},
			bindChange: function(e) {
				const val = e.detail.value
				this.year = this.years[val[0]]
				this.month = this.months[val[1]]
				this.day = this.days[val[2]]
			},
			// onTimePickerChange(dateObj) {
			// 	this.showTimePick = dateObj.datePickerFlag
			// 	this.dateObj = dateObj
			// }
			onTimePickerFlagChange(val) {
				this.showTimePick = val
			},
			onPickerDateChange({
				beginDate,
				endDate,
				dateType,
				dateTypeName
			}) {
				this.dateObj.beginDate = beginDate
				this.dateObj.endDate = endDate
				this.dateObj.dateType = dateType
				this.dateObj.dateTypeName = dateTypeName
				this.updatePage()
			}
		}
	}
</script>
<style>
	page {
		padding-top: calc(40rpx + 20rpx + 60rpx + 20rpx + 90rpx + 20rpx);
		padding-top: calc(var(--status-bar-height) + 20rpx + 60rpx + 20rpx + 90rpx + 20rpx);
	}
</style>
<style scoped lang="scss">
	.top {
		position: fixed;
		top: 0;
		left: 0;
		width: 100vw;
		z-index: 9999;
		// padding-top: 60rpx;
		// padding-top: calc(var(--status-bar-height) + 20rpx);
		background-color: #fff;
	}

	.header {
		display: flex;
		margin-bottom: 20rpx;
	}

	.header-back {
		display: flex;
		align-items: center;
		box-sizing: border-box;
		width: 100rpx;
		height: 60rpx;
		padding-left: 30rpx;

		image {
			width: 16rpx;
			height: 28rpx;
		}
	}

	.header-search {
		display: flex;
		align-items: center;
		width: 550rpx;
		height: 60rpx;
		padding: 0 20rpx;
		border-radius: 30rpx;
		background-color: $g-main-bg;

		input {
			font-size: 26rpx;
			margin-left: 18rpx;
			flex: 1;
			line-height: 60rpx;
		}
	}

	.header-add {
		width: 100rpx;
		height: 60rpx;
		display: flex;
		justify-content: center;
		align-items: center;

		image {
			width: 34rpx;
			height: 34rpx;
		}
	}

	.nav {
		display: flex;
		line-height: 90rpx;
	}

	.nav-item {
		flex: 1;
		display: flex;
		align-items: center;
		justify-content: center;
		// justify-content: flex-end;
		padding-right: 60rpx;

		text {
			display: block;
			position: relative;

			&::after {
				position: absolute;
				right: -30rpx;
				top: 46%;
				content: '';
				width: 12rpx;
				height: 12rpx;
				border-top: 1px solid #888;
				border-right: 1px solid #888;
				transform: translateY(-50%) rotate(135deg);
				transition: all 0.3s;
			}
		}

		.active {
			&::after {
				transform: translateY(0%) rotate(-45deg);
			}
		}
	}

	.list {
		background-color: #fff;
	}

	.item {
		padding: 30rpx;
		border-bottom: 1px solid $g-border-color;
	}

	.item-T {
		display: flex;
		justify-content: space-between;
		// margin-bottom: 28rpx;
	}

	.item-user {
		max-width: 500rpx;
		font-size: 30rpx;

		text {
			margin-right: 6rpx;
		}
	}

	.item-price {
		display: flex;
		justify-content: flex-end;
		align-items: baseline;
		text {
			color: #FF9933;
			
			&:nth-child(1) {
				color: #999;
				font-size: 24rpx;
			}
			&:nth-child(2) {
				font-size: 24rpx;
			}
			&:nth-child(3) {
				font-size: 30rpx;
			}
		}
	}

	.item-B {
		display: flex;
		justify-content: space-between;
	}

	.item-BL {
		display: flex;
	}

	.item-tag {
		width: 60rpx;
		height: 36rpx;
		line-height: 34rpx;
		text-align: center;
		font-size: 18rpx;
		color: #3377FF;
		background: #E5EEFF;
		border-radius: 6rpx;

		&.online {
			color: #FF7733;
			background: #FFF0E8;
		}
	}

	.item-no {
		// margin-left: 20rpx;
		font-size: 24rpx;
	}

	.item-date {
		font-size: 24rpx;
		color: #999;
	}

	.typePick {
		border-top: 1px solid $g-border-color;
		padding-top: calc(40rpx + 20rpx + 60rpx + 20rpx + 90rpx);
		padding-top: calc(var(--status-bar-height) + 20rpx + 60rpx + 20rpx + 90rpx);
		padding-bottom: 100rpx;
	}

	.typePick-item {
		line-height: 100rpx;
		padding-left: 30rpx;
		border-top: 1px solid $g-border-color;
		font-size: 30rpx;

		&.active {
			position: relative;
			color: $g-main-color;

			&::after {
				content: '';
				position: absolute;
				right: 40rpx;
				top: 50%;
				width: 30rpx;
				height: 16rpx;
				border-left: 2px solid $g-main-color;
				border-bottom: 2px solid $g-main-color;
				transform: translateY(-60%) rotate(-45deg);
			}
		}
	}

	.timePick-header {
		display: flex;
		justify-content: space-between;
		align-items: center;
		height: 100rpx;
		padding: 0 30rpx;
		font-size: 32rpx;
	}

	.timePick-header_cancel {
		color: #999;
	}

	.timePick-header_title {
		font-weight: bold;
		font-size: 34rpx;
	}

	.timePick-header_confirm {
		color: $g-main-color;
	}

	.timePick-type {
		position: relative;
		display: flex;
		margin-bottom: 42rpx;
		border-bottom: 1px solid $g-border-color;
	}

	.timePick-typeItem {
		flex: 1;
		display: flex;
		align-items: center;
		justify-content: center;
		height: 90rpx;
		font-size: 26rpx;
		color: #808080;

		&.active {
			color: #333;
			font-weight: bold;
		}
	}

	.timePick-type_border {
		position: absolute;
		left: 46rpx;
		bottom: 4rpx;
		width: 50rpx;
		height: 4rpx;
		border-radius: 2rpx;
		background-color: $g-main-color;
		// border-bottom: 2px solid $g-main-color;
	}

	.timePick-startend {
		display: flex;
		justify-content: space-between;
		padding: 0 30rpx;
		box-sizing: border-box;
	}

	.timePick-start {
		position: relative;

		&::after {
			position: absolute;
			top: 50%;
			right: -50rpx;
			content: '';
			width: 30rpx;
			border-bottom: 1px solid #ccc;
		}
	}

	.timePick-start,
	.timePick-end {
		display: flex;
		justify-content: center;
		align-items: center;
		flex-direction: column;
		width: 310rpx;
		height: 110rpx;
		border-radius: 10rpx;
		font-size: 26rpx;
		color: #808080;
		background-color: $g-main-bg;

		view {
			&:first-child {
				margin-bottom: 8rpx;
			}
		}

		&.active {
			background-color: #fff;
			color: $g-main-color;
			border: 1px solid $g-main-color;
		}
	}

	.timePick-picker {
		width: 750rpx;
		height: 300rpx;
		margin-top: 20rpx;
		padding-bottom: constant(safe-area-inset-bottom);
		padding-bottom: env(safe-area-inset-bottom);
	}

	.timePick-pickerItem {
		height: 100rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		text-align: center;
		font-weight: bold;
	}
</style>
